<template>
  <div class="category-quick-nav">
    <div v-for="category in categories" :key="category.id" class="nav-item" @click="goToCategory(category.id)">
      <div class="icon-wrapper">
        <el-icon :size="24"><component :is="category.icon" /></el-icon>
      </div>
      <span>{{ category.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, markRaw } from 'vue'
import { useRouter } from 'vue-router'
import {
  Monitor,
  House,
  Briefcase,
  MagicStick,
  Bicycle,
  Grape,
  Notebook,
  Menu
} from '@element-plus/icons-vue'

const router = useRouter()

// Placeholder data
const categories = ref([
  { id: 1, name: '电子产品', icon: markRaw(Monitor) },
  { id: 2, name: '家居生活', icon: markRaw(House) },
  { id: 3, name: '服饰箱包', icon: markRaw(Briefcase) },
  { id: 4, name: '个护美妆', icon: markRaw(MagicStick) },
  { id: 5, name: '运动户外', icon: markRaw(Bicycle) },
  { id: 6, name: '食品饮料', icon: markRaw(Grape) },
  { id: 7, name: '图书文娱', icon: markRaw(Notebook) },
  { id: 8, name: '全部分类', icon: markRaw(Menu) },
])

const goToCategory = (categoryId: number) => {
  if (categoryId === 8) { // "全部分类"
    router.push({ path: '/products' })
  } else {
    router.push({ path: '/products', query: { categoryId: categoryId } })
  }
}
</script>

<style scoped>
.category-quick-nav {
  display: flex;
  justify-content: space-around;
  padding: 1.5rem 0;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #333;
}
.icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 24px;
  transition: all 0.3s ease;
}
.nav-item:hover .icon-wrapper {
  background-color: #409eff;
  color: #fff;
}
.nav-item span {
  font-size: 14px;
}
</style>
